<template>
  <!-- style="width: 100%; height: 250px" -->
  <div ref="lineChartRef" :style="containerStyle" ></div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, computed } from "vue";
  import * as echarts from "echarts";

  const props = defineProps({
    data: {
      type: Object,
      required: true,
    },
    width: {
     
      default: '100%',
    },
    height:{
      type: Number,
      default: 250,
    },
 
  });
  const lineChartRef = ref(null);

  onMounted(() => {
    if (lineChartRef.value) {
      const chart = echarts.init(lineChartRef.value);
      const option = {
        color: ["#5cc4a7", "#8170cb", "#f9a647", "#4bacc6"], // 扩展颜色方案
        tooltip: {
          trigger: "axis", // 折线图通常使用 axis 触发
          formatter: "{a} <br/>{b}: {c}", // 折线图不需要百分比
          backgroundColor: "rgba(50,50,50,0.9)",
          borderColor: "#333",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          extraCssText: "box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);",
        },
        // legend: {
        //   top: "0",
        //   right: "center",
        //   width: "260px", // 控制图例宽度，使内容在一行内显示
        //   textStyle: {
        //     color: "#666",
        //     fontSize: 14,
        //     fontFamily: "Arial, sans-serif",
        //   },
        //   itemWidth: 12,
        //   itemHeight: 12,
        //   itemGap: 20,
        // },
        xAxis: {
          type: "category",
          data: ["铁路运输", "公路运输", "水路运输", "航空运输","传动带运输","管道运输","其他运输",], // 示例数据，根据实际情况修改
          axisLabel:{
            rotate: 30
          }
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "运输方式",
            type: "line", // 修改为折线图
            data: [
              { value: 0, name: "铁路运输" },
              { value: 1, name: "公路运输" },
              { value: 2, name: "水路运输" },
              { value: 3, name: "航空运输" },
              { value: 4, name: "传动带运输" },
              { value: 2, name: "管道运输" },
              { value: 1, name: "其他运输" },
            ],
            animationType: "scale", // 动画效果
            animationEasing: "elasticOut", // 弹性动画
         
          },
        ],
        backgroundColor: "#fff", // 白色背景更专业
        textStyle: {
          fontFamily: "Arial, sans-serif", // 统一字体
        },
      };
      chart.setOption(option);
    }
  });


  // 计算容器样式
  const containerStyle = computed(() => {
    return {
      width: typeof props.width === "number" ? `${props.width}px` : props.width,
      height:
        typeof props.height === "number" ? `${props.height}px` : props.height,
    };
  });
</script>
<style lang="scss" scoped></style>
